<template>

  <div>

    <div v-if="pageType=='cartList'">
      <div class="preferential" style="text-align: left">
        <label class="aui-label-danger aui-label-outlined"
               style="margin-left: 0.5rem">{{ saleType == 'buyPresent' ? '买赠' : '返利'}}</label>
        <span class="cjy-sec-title" style="color: rgb(44, 62, 80)
">{{showTitle}}</span>

        <a class="cjy-span" v-if="maxNum == 0">
          赠品不足
        </a>

        <a class="cjy-span" v-if="!selectNum && maxNum !== 0">
          去选取
        </a>
        <a class="cjy-span" v-if="selectNum && maxNum !== 0">
          {{addMoney ? '已加价：' : '已赠'}}{{ addMoney ? '¥' + parseFloat(addMoney * selectNum).toFixed(2) : maxNum +
          '份'}}</a>
      </div>
    </div>


    <div v-else style="position: relative;width: 100%;height: 100%; ">

      <div class="cjy-moldeTitle cjy-overflow" style="">
        {{title}}
      </div>

      <div style="height:20rem;padding:2.2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
        <vertical-scroll :lengths="3" ref="translateMain">
          <div style="width: 100%">
            <ul class="cjy-selectLadderMelue">


              <li class="cjy-selectLadderList"
                  v-if="addMoney && giftType == 1">

                <div class="cjy-regular-title cjy-text-overflow">
                <span style="float: none;padding:0; color:rgb(234, 57, 57)">
                  {{'共计:¥' + translatePrice(addMoney * selectNum)}} </span>
                  <i style="font-size: 0.6rem">{{'(换购单价:¥'+translatePrice(addMoney) + ')'}}</i>
                </div>


                <div v-if="maxNum" class="cjy-add-sub"
                     style=" padding:0 ;position:relative;padding-right:0;display: flex">
                  <div class="cjy-button-box" @click="sub">
                    <div class="cjy-sub-button"></div>
                  </div>
                  <span style="color: black">{{selectNum+'/'+ maxNum}}</span>

                  <div class="cjy-button-box" @click="add">
                    <div class="cjy-add-button"></div>
                  </div>
                </div>

                <div v-else>
                  <span>
                  赠品不足
                  </span>
                </div>

              </li>
              <!--不可选赠品-->
              <li v-else class="cjy-selectLadderList" style="text-align: left">
                <span class="cjy-regular-name" v-if="giftType" style="margin-left: 0.5rem;">礼包：{{giftName}}</span>
                <span v-else class="cjy-regular-name cjy-overflow" style="margin-left: 0.5rem;">礼券：{{giftName}}</span>
                <span v-if="maxNum">
                  已免费赠送：{{maxNum}}份
                </span>
                <span v-else>
                  赠品不足
                </span>
              </li>

              <!--赠品-->
              <li
                v-for="(item,index) in giftGoodsList"
                class="cjy-show-gift-list">

                <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;">商</label>
                <span class="cjy-regular-name cjy-overflow">
              {{item.goodsName}}</span>
                <span class="cjy-regular-price"> 价值：<span
                  style="color: rgb(234, 57, 57)">¥{{ parseFloat(item.goodsPrice).toFixed(2)}}</span></span>
                <span class="cjy-regular-num">{{item.giveQuantity}}件</span>
              </li>
              <!--优惠券-->
              <li v-if="item.auditorTime"
                  v-for="(item,index) in giftCouponList"
                  class="cjy-show-gift-list" style="">
                <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;">券</label>
                <span class="cjy-overflow cjy-regular-name" style=" max-width: 50%"> {{item.couponName}}</span>
              </li>

              <li v-if="!item.auditorTime"
                  v-for="(item,index) in giftCouponList"
                  class="cjy-show-gift-list" style="">
                <label class="aui-label-danger aui-label-outlined cjy-icon"
                       style="margin-left: 0.5rem">券</label>
                <span class="cjy-overflow cjy-regular-name"> {{item.couponName}}</span>
              </li>
              <li class="cjy-show-gift-list  ">
                <span style="margin-left:0.5rem">！礼品有限，送完即止
                </span>
              </li>
            </ul>
          </div>
        </vertical-scroll>
      </div>
    </div>

  </div>
</template>

<script>
  import VerticalScroll from '@/components/VerticalScroll'
  import showBox from '@/components/CartPullRegular'
  import {translatePrice} from '@/utils/TranslatePriceC'

  export default {
    data() {
      return {
        title: '',
        selectNum: 0,
        addMoney: '',
        promCode: '',
        giftVO: null,
        maxNum: 0,
        showTitle: '',
        giftName: '',
        promId: '',
        saleType: '',
        giftGoodsList: [],
        giftCouponList: [],
        giftType: 0,
      }
    },
    props: {
      pageType: {
        type: String,
        default: ''
      },
      buyMoreDetail: {
        type: Object,
        default: () => {
        }
      },
      goodsType: {
        default: 1
      },
      goodsUnit: {
        default: '件'
      },
    },
    components: {VerticalScroll, showBox},
    watch: {
      buyMoreDetail(data) {
        console.log(data, 'fdsfsd')
        this.changeData()
        this.initData()
      },
      buyMoreData() {
        if (this.saleType == 'buyPresent') {
          this.selectNum = this.maxNum
          return
        }

        var promId = this.promId
        var saveDetail = this.buyMoreData.find((item) => {
            return item.promId == promId
          }
        )
        //如果被选中过
        if (saveDetail) {
          var selectNum = saveDetail.selectNum
          if (selectNum < this.maxNum) {
            this.selectNum = selectNum
            if (parseFloat(this.addMoney) == 0) {
              this.selectNum = this.maxNum
            }
          } else if (selectNum == this.maxNum) {
            this.selectNum = selectNum
          }
        }
        //如果没选中将他放入已选
        else {
          if (!this.addMoney) {
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
          } else
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(0))
        }
      }
    },
    computed: {
      buyMoreData() {
        return this.$store.state.cjy.buyMoreData
      },
    },
    methods: {
      translatePrice,
      add() {
        var selectNum = this.selectNum + 1
        var maxNum = this.maxNum

        if (selectNum <= maxNum) {
          var config = this.getConfig(selectNum)

          this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', config)
          this.selectNum = selectNum
        }
      },

      sub() {

        var selectNum = this.selectNum - 1
        if (selectNum >= 0) {
          this.getConfig(selectNum)
          this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(selectNum))
          this.selectNum = selectNum
        }
      },
      buyPresentDes(isOk, item) {
        var x, n, z, util, giftName
        if (item.prefWay != 1) {
          return '多买多优惠'
        }
        x = item.fullCondition || parseFloat(item.fullElement).toFixed(2)
        n = item.minusMoney
        z = parseFloat(item.numOrMoneyShort || 0).toFixed(2)
        giftName = item.giftVO ? item.giftVO.giftName : item.couponVO ? item.couponVO.couponName : ''
        util = this.goodsType == 6 || this.goodsType == 7 ? 'kg' : this.goodsUnit
        util = item.fullElement ? '元' : util
        if (isOk) {
          return `已购满${x + util}，获得 ${giftName }`
        }
        return `满${x + util}，获得 ${giftName }`
      },

      changeData() {
        var type
        if (!this.buyMoreDetail) {
          return
        }
        this.showTitle = this.buyPresentDes(true, this.buyMoreDetail)
        this.title = this.buyMoreDetail.promName
        this.saleType = this.buyMoreDetail.saleType
        this.addMoney = this.buyMoreDetail.addMoney || 0
        this.promId = this.buyMoreDetail.promId
        this.promCode = this.promCode
        this.giftVO = this.buyMoreDetail.giftVO
        this.couponVO = this.buyMoreDetail.couponVO
        if (this.giftVO) {
          type = 'giftVO'
        } else {
          type = 'couponVO'
        }
        this.maxNum = this.buyMoreDetail[type].times || 0
        this.giftType = this.buyMoreDetail[type].giftType || 0
        this.giftName = this.buyMoreDetail[type].giftName || this.buyMoreDetail.promName
        this.giftGoodsList = this.buyMoreDetail[type].giftGoodsList || []
        this.giftCouponList = this.buyMoreDetail[type].giftCouponList || [this.couponVO]

      },
      initData() {
        if (this.saleType == 'buyPresent') {
          this.selectNum = this.maxNum
          return
        }

        var promId = this.promId
        var saveDetail = this.buyMoreData.find((item) => {
            return item.promId == promId
          }
        )
        //如果被选中过
        if (saveDetail) {
          var selectNum = saveDetail.selectNum
          if (selectNum < this.maxNum) {
            this.selectNum = selectNum
            if (parseFloat(this.addMoney) == 0) {
              this.selectNum = this.maxNum
              this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
            }
          } else if (selectNum == this.maxNum) {
            this.selectNum = selectNum
          }
          else {
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
          }
        }
        //如果没选中将他放入已选
        else {
          if (!this.addMoney) {
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
          } else
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(0))
        }
      },
      getConfig(selectNum) {
        var config = {
          selectNum,
          giftVO: this.giftVO,
          couponVO: this.couponVO,
          addMoney: this.addMoney,
          promId: this.promId,
          promCode: this.promCode
        }
        return config
      }
    },
    mounted() {
      this.changeData()
      this.initData()
    }
  }
</script>

<style scoped="">
  .preferential span, .cjy-add-sub {
    padding-right: 0.75rem;
    color: #EF5423;
    height: 2rem;
  }

  .cjy-add-sub-showNumb {
    height: 2rem;
    width: 1rem;
    text-align: center;
    vertical-align: middle;
    display: flex;
  }

  .cjy-add-button, .cjy-sub-button {
    border: 1px solid rgb(234, 57, 57);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    display: block;
    position: relative;
    box-sizing: content-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
  }

  .cjy-button-box {
    position: relative;
    height: 2rem;
    width: 1.5rem;
  }

  .cjy-add-button::after, .cjy-sub-button::after {
    content: '';
    width: 0.6rem;
    height: 0rem;
    border-top: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-sub-button {
    border: 1px solid gray;
  }

  .cjy-sub-button::after {
    border-top: 1px solid gray;
  }

  .cjy-add-button::before {
    content: '';
    width: 0;
    height: 0.6rem;
    border-left: 1px solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    border-bottom: 1px solid #F1F1F1;
    line-height: 2.2rem;
    position: absolute;
    word-break: break-all;
    white-space: nowrap;
    width: 100%;
    padding: 0 2rem;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }

  .cjy-selectLadderList {
    display: flex;
    border-bottom: 1px solid #F1F1F1;
    height: 2rem;
    justify-content: space-between;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
  }

  .cjy-show-gift-list {
    text-align: left;
    border-top: 1px dashed lightgrey;
    height: 1.5rem;
    display: flex;
    line-height: 1.5rem
  }

  .cjy-selectLadderMelue {
    padding: 0 0.7rem;
  }

  .cjy-regular-title {
    display: inline-block;
    padding-left: 0.5rem;
    line-height: 2rem;
    max-width: 70%;
    overflow: hidden;
    height: 2rem;
    font-size: 0.8rem
  }

  .cjy-regular-name, .cjy-regular-price, .cjy-regular-num {
    display: inline-block;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .cjy-regular-price {
    margin-right: 0.75rem;
  }

  .cjy-regular-num {
  }

  .cjy-regular-name {
    /*padding-left: 0.5rem;*/
    position: relative;
    flex: 1;
    text-align: left
  }

  .cjy-add-button, .cjy-sub-button {
    border: 1px solid rgb(234, 57, 57);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    top: 50%;
    transform: translatey(-50%);
    display: block;
    position: relative;
  }

  .cjy-add-button::after, .cjy-sub-button::after {
    content: '';
    width: 0.6rem;
    height: 0rem;
    border-top: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-sub-button {
    border: 1px solid gray;
  }

  .cjy-sub-button::after {
    border-top: thin solid gray;
  }

  .cjy-add-button::before {
    content: '';
    width: 0;
    height: 0.6rem;
    border-left: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-button-box {
    float: right;
    padding: 2px;
  }

  .cjy-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }

  .cjy-sec-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-left: 0.5rem;
    height: 1rem;
    margin-top: 0 !important;
    vertical-align: middle;
    flex: 1;
  }

  .preferential {
    padding: 0.3rem 0;
    line-height: 1rem;
    background: #FFF3EE;
    display: flex;
    height: 1.6rem;
  }

  .preferential label {
    line-height: 1rem;
    padding: 0 0.1rem;
  }

  .preferential a {
    padding-right: 1rem;
    margin-top: 0;
  }

  .preferential a:before {
    right: 0.5rem;
    top: 50%;
  }

  .preferential .cjy-span, .preferential .cjy-add-sub {
    padding-right: 1rem;
    color: #EF5423;
  }

  .cjy-icon {
    padding: 0 0.1rem;
    margin: 0.2rem 0.3rem 0.2rem 0;
    line-height: 1rem;
  }

  .cjy-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
</style>
